<template>
  <el-table
    v-if="tableHeight"
    ref=""
    :data="tableData"
    border
    style="width: 100%"
    :height="tableHeight"
    v-loading="loading"
  >
    <el-table-column type="index" width="50" label="序号" align="center" />
    <el-table-column v-for="(item, index) in tableColumn" :key="index" v-bind="item">
      <template slot-scope="scope">
        <span :style="{ color: btnColor(item, scope.row) }">
          {{ btnName(item, scope.row) }}
        </span>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import _ from 'lodash';
import moment from 'moment';
import http from '../../api/http';

export default {
  name: 'seeTable',
  props: {
    // 表格高度
    tableHeight: {
      type: Number,
      default: 360,
    },
    // 表格渲染数据
    getDataApi: {
      type: String,
      default: '',
    },
    tableColumn: {
      type: Array,
      default: () => [],
    },
    tableDataParent: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      loading: false,
      tableData: [],
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      if (!this.getDataApi) {
        this.tableData = this.tableDataParent;
        return;
      }
      this.loading = true;
      this.$api.aa_seePlate[this.getDataApi]()
        .then(res => {
          res.data.forEach(item => {
            Object.keys(item).forEach(key => {
              if (
                [
                  'date',
                  'time',
                  'actual_date',
                  'actual_finish_date',
                  'project_finish_date',
                  'start_date',
                  'end_date',
                  'issue_date',
                  'actual_end_date',
                ].includes(key)
              ) {
                item[key] = moment(item[key]).format('YYYY-MM-DD hh:mm:ss');
              }
            });
          });
          this.tableData = res.data;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    handleBtnClick(key, row, rowIndex) {
      this.$emit('handleBtnClick', key, row, rowIndex);
    },
    btnName(curColConfig, row) {
      if (curColConfig.filter) {
        if (![undefined, null].includes(row[curColConfig.prop])) {
          return curColConfig.filter[row[curColConfig.prop]];
        } else {
          return '-';
        }
      } else {
        return row[curColConfig.prop];
      }
    },
    btnColor(curColConfig, row) {
      if (curColConfig.colorFilter) {
        if (![undefined, null].includes(row[curColConfig.prop])) {
          return curColConfig.colorFilter[row[curColConfig.prop]];
        } else {
          return curColConfig.colorFilter['default'];
        }
      }
    },
  },
};
</script>

<style lang="scss"></style>
